<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>分页查询</title>
		<script src="../static/jquery/3.3.1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../static/bootstrap/3.3.7/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../static/babel/6.26.0/polyfill.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../static/axios/0.17.1/axios.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../static/vue/2.5.13/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../static/element-ui/2.1.0/index.js" type="text/javascript" charset="utf-8"></script>
		<script src="../static/echarts/4.0.2/echarts.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../static/echarts-gl/1.0.2/echarts-gl.min.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="../static/bootstrap/3.3.7/bootstrap.min.css" />
		<link rel="stylesheet" type="text/css" href="../static/element-ui/2.1.0/index.css" />
		<script src="js/common.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/hou-tai.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="css/hou-tai.css" />
		<script src="js/sui-ji-shu-ju.js" type="text/javascript" charset="utf-8"></script>
	</head>

	<body>
		<div id="app">
			<hou-tai>
				<div style="width: 90%; margin: auto;">
					<el-row type="flex" justify="space-between" align="middle">
						<el-col :span="5">
							<el-date-picker v-model="kaiShiRiQi" size="small" type="date" placeholder="开始日期" @change="chaXun">
							</el-date-picker>
						</el-col>
						<el-col :span="5">
							<el-date-picker v-model="jieShuRiQi" size="small" type="date" placeholder="结束日期" @change="chaXun">
							</el-date-picker>
						</el-col>
						<el-col :span="5">
							<el-select size="small" v-model="diZhi" clearable filterable placeholder="请选择" @change="chaXun">
								<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
								</el-option>
							</el-select>
						</el-col>
						<el-col :span="3">
							<el-input size="small" v-model="xingMing" clearable placeholder="请输入姓名" @change="chaXun"></el-input>
						</el-col>
						<el-col :span="6" align="right">
							<el-button size="mini" type="primary" icon="el-icon-search" @click="chaXun">查询</el-button>
							<el-button size="mini" type="success" icon="el-icon-plus" @click="handleCreate">新增</el-button>
							<el-button size="mini" type="danger" icon="el-icon-delete" @click="handleSelectionDelete">批量删除</el-button>
						</el-col>
					</el-row>
					<el-table :data="tableData" stripe border @selection-change="handleSelectionChange" style="margin-top: 10px;">
						<el-table-column type="selection" width="60">
						</el-table-column>
						<el-table-column type="expand">
							<template slot-scope="props">
								<el-form label-position="left" inline class="demo-table-expand">
									<el-form-item label="姓名">
										<span>{{ props.row.xm }}</span>
									</el-form-item>
									<el-form-item label="身份证号">
										<span>{{ props.row.sfzh }}</span>
									</el-form-item>
									<el-form-item label="生日">
										<span>{{ props.row.sr }}</span>
									</el-form-item>
									<el-form-item label="手机号">
										<span>{{ props.row.sjh }}</span>
									</el-form-item>
									<el-form-item label="所在省份">
										<span>{{ props.row.dz }}</span>
									</el-form-item>
									<el-form-item label="运营商">
										<span>{{ props.row.yys }}</span>
									</el-form-item>
									<el-form-item label="性别">
										<span>{{ props.row.xb }}</span>
									</el-form-item>
									<el-form-item label="备注">
										<span>{{ props.row.bz }}</span>
									</el-form-item>
								</el-form>
							</template>
						</el-table-column>
						<el-table-column label="序号" type="index" :index="index" width="60">
						</el-table-column>
						<el-table-column label="姓名">
							<template slot-scope="scope">
								<el-popover trigger="hover" open-delay="200" placement="right-end">
									<p>姓名: {{ scope.row.xm }}</p>
									<p>所在省份: {{ scope.row.dz }}</p>
									<p>性别: {{ scope.row.xb }}</p>
									<div slot="reference">
										<el-tag size="medium">{{ scope.row.xm }}</el-tag>
									</div>
								</el-popover>
							</template>
						</el-table-column>
						<el-table-column label="出生日期">
							<template slot-scope="scope">
								<i class="el-icon-time"></i>
								<span style="margin-left: 10px">{{ scope.row.sr }}</span>
							</template>
						</el-table-column>
						<el-table-column label="联系方式">
							<template slot-scope="scope">
								<i class="el-icon-mobile-phone"></i>
								<span style="margin-left: 10px">{{ scope.row.sjh }}</span>
							</template>
						</el-table-column>
						<el-table-column label="操作">
							<template slot-scope="scope">
								<el-button size="mini" icon="el-icon-edit" @click="handleEdit(scope.row)">编辑</el-button>
								<el-button size="mini" type="danger" icon="el-icon-delete" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
							</template>
						</el-table-column>
					</el-table>
					<el-pagination @current-change="handleCurrentChange" :total='total' :current-page.sync="currentPage">
					</el-pagination>
					<el-dialog title="编辑" :visible.sync="dialogEditVisible" :close-on-click-modal='false'>
						<el-form label-position="left" inline class="demo-table-expand">
							<el-form-item label="姓名">
								<el-input v-model="bianJiYongHu.xm" placeholder="请输入姓名"></el-input>
							</el-form-item>
							<el-form-item label="身份证号">
								<el-input v-model="bianJiYongHu.sfzh" placeholder="请输入身份证号" maxlength='18'></el-input>
							</el-form-item>
							<el-form-item label="生日">
								<span>{{ bianJiYongHu.sr }}</span>
							</el-form-item>
							<el-form-item label="手机号">
								<el-input v-model="bianJiYongHu.sjh" placeholder="请输入手机号" maxlength='11'></el-input>
							</el-form-item>
							<el-form-item label="所在省份">
								<span>{{ bianJiYongHu.dz }}</span>
							</el-form-item>
							<el-form-item label="运营商">
								<span>{{ bianJiYongHu.yys }}</span>
							</el-form-item>
							<el-form-item label="性别">
								<span>{{ bianJiYongHu.xb }}</span>
							</el-form-item>
							<el-form-item label="备注">
								<el-input v-model="bianJiYongHu.bz" placeholder="请输入内容"></el-input>
							</el-form-item>
						</el-form>
						<span slot="footer">
							<el-button @click="dialogEditVisible = false">取 消</el-button>
							<el-button type="primary" @click="update">确 定</el-button>
						</span>
					</el-dialog>
					<el-dialog title="新增" :visible.sync="dialogCreateVisible">
						<el-form label-position="left" inline class="demo-table-expand">
							<el-form-item label="姓名">
								<el-input v-model="xinZengYongHu.xm" placeholder="请输入姓名"></el-input>
							</el-form-item>
							<el-form-item label="身份证号">
								<el-input v-model="xinZengYongHu.sfzh" placeholder="请输入身份证号" maxlength='18'></el-input>
							</el-form-item>
							<el-form-item label="生日">
								<span>{{ xinZengYongHu.sr }}</span>
							</el-form-item>
							<el-form-item label="手机号">
								<el-input v-model="xinZengYongHu.sjh" placeholder="请输入手机号" maxlength='11'></el-input>
							</el-form-item>
							<el-form-item label="所在省份">
								<span>{{ xinZengYongHu.dz }}</span>
							</el-form-item>
							<el-form-item label="运营商">
								<span>{{ xinZengYongHu.yys }}</span>
							</el-form-item>
							<el-form-item label="性别">
								<span>{{ xinZengYongHu.xb }}</span>
							</el-form-item>
							<el-form-item label="备注">
								<el-input v-model="xinZengYongHu.bz" placeholder="请输入内容"></el-input>
							</el-form-item>
						</el-form>
						<span slot="footer">
							<el-button @click="dialogCreateVisible = false">取 消</el-button>
							<el-button type="primary" @click="create">确 定</el-button>
						</span>
					</el-dialog>
				</div>
			</hou-tai>
		</div>
		<script src="js/fen-ye.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="css/fen-ye.css" />
	</body>

</html>